import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { Form } from '@ant-design/compatible';
import '@ant-design/compatible/assets/index.css';
import { Divider, Input, Select } from 'antd';
import styles from './styles.less';
// import { FormItemLayout } from '../form/formPub';
import { taskType, taskTypeObj } from './commonFunc';
import { PrimaryC } from '../button';
const FormItemLayout = {
  labelCol: {
    xs: { span: 4, offset: 0 },
    sm: { span: 8, offset: 0 },
    md: { span: 8, offset: 0 },
    lg: { span: 8, offset: 0 },
    xl: { span: 7, offset: 0 },
    xxl: { span: 7, offset: 0 },
  },
  wrapperCol: {
    xs: { span: 18, offset: 0 },
    sm: { span: 14, offset: 0 },
    md: { span: 14, offset: 0 },
    lg: { span: 14, offset: 0 },
    xl: { span: 15, offset: 0 },
    xxl: { span: 15, offset: 0 },
  },
};
class UserTaskPannel extends Component {
  // 默认值
  static defaultProps = {
    id: undefined, // 节点ID
    name: undefined, // 节点名称
    taskType: undefined, // 任务类型
    station: undefined, // 岗位
    user: undefined, // 用户
    nameChanged: () => {}, // 名字变更事件
    taskTypeChanged: () => {}, // 任务类型变更事件
    stationChanged: () => {}, // 岗位变更事件
    userChanged: () => {}, // 用户变更事件
    mode: 'view', // 默认查看模式
    saveUserTask: () => {}, // 保存设置事件
  };

  constructor(props) {
    super(props);

    let { name, taskType, station, user } = props;
    this.state = {
      name: name, // 节点名称
      taskType: taskType, // 任务类型
      station: station, // 岗位
      user: user, // 用户
    };
  }

  UNSAFE_componentWillReceiveProps(nextProps) {
    if (this.props.id !== nextProps.id) {
      this.props.form.setFieldsValue({ id: nextProps.id });
    }
    if (this.props.name !== nextProps.name) {
      this.props.form.setFieldsValue({ name: nextProps.name });
    }
    if (this.props.taskType !== nextProps.taskType) {
      this.props.form.setFieldsValue({ taskType: nextProps.taskType });
      this.setState({ taskType: nextProps.taskType });
    }
    if (this.props.station !== nextProps.station) {
      this.props.form.setFieldsValue({ station: nextProps.station });
    }
    if (this.props.user !== nextProps.user) {
      this.props.form.setFieldsValue({ user: nextProps.user });
    }
  }

  componentDidMount() {
    this.props.form.setFieldsValue({
      id: this.props.id, // 节点ID
      name: this.props.name, // 节点名称
      taskType: this.props.taskType, // 任务类型
      station: this.props.station, // 岗位
      user: this.props.user, // 用户
    });
  }

  // 响应任务类型变更
  taskTypeChanged = (e) => {
    this.setState({ taskType: e });

    this.props.taskTypeChanged(e);
  };

  // 点击保存设置
  handleSubmit = (e) => {
    e.preventDefault();
    let { taskType } = this.state;
    let tempArr = [];
    // 多人抢占、多人并发、多人顺序必填项设置
    if (taskType == taskTypeObj.seize || taskType == taskTypeObj.concurrent || taskType == taskTypeObj.order) {
      tempArr = ['id', 'name', 'taskType', 'station'];
    }
    // 单人审批必填项设置
    if (taskType == taskTypeObj.single) {
      tempArr = ['id', 'name', 'taskType', 'user'];
    }
    // 发起人必填项设置
    if (taskType == taskTypeObj.sponsor) {
      tempArr = ['id', 'name', 'taskType'];
    }
    this.props.form.validateFields(tempArr, (err, values) => {
      if (!err) {
        // 抛出保存设置事件
        this.props.saveUserTask(values);
      }
    });
  };
  render() {
    const { form, nameChanged, stationChanged, userChanged, mode, userList, stationList } = this.props;
    const { getFieldDecorator } = form;
    return (
      <div className={`${styles.SequenceFlowPannel}`}>
        <div>配置项设置</div>
        <Form onSubmit={this.handleSubmit}>
          <Form.Item label='编号' {...FormItemLayout} className={'formCls1'}>
            {getFieldDecorator('id')(<Input disabled />)}
          </Form.Item>
          <Form.Item label='名称' {...FormItemLayout} className={'formCls1'}>
            {getFieldDecorator('name', {
              rules: [{ required: true, message: '名称不能为空!' }],
            })(<Input disabled={mode === 'view'} onChange={nameChanged} maxLength={20} />)}
          </Form.Item>
          <Form.Item label='类型' {...FormItemLayout} className={'formCls1'}>
            {getFieldDecorator('taskType', {
              rules: [{ required: true, message: '类型不能为空!' }],
            })(
              <Select getPopupContainer={(triggerNode) => triggerNode.parentNode} onChange={this.taskTypeChanged} disabled={mode === 'view'}>
                {taskType.map((item) => (
                  <Select.Option value={item.value} key={item.value}>
                    {item.title}
                  </Select.Option>
                ))}
              </Select>,
            )}
          </Form.Item>
          <Form.Item
            label='岗位'
            {...FormItemLayout}
            style={{
              display:
                this.state.taskType == taskTypeObj.seize || this.state.taskType == taskTypeObj.concurrent || this.state.taskType == taskTypeObj.order ? 'inline-block' : 'none',
            }}
            className={'formCls1'}
          >
            {getFieldDecorator('station', {
              rules: [{ required: true, message: '岗位不能为空!' }],
            })(
              <Select getPopupContainer={(triggerNode) => triggerNode.parentNode} onChange={stationChanged} disabled={mode === 'view'}>
                {
                  //岗位改为岗位 字段不改变 传参的时候根据后端要求拼接为 station+岗位id
                  stationList &&
                    stationList.map((item, index) => {
                      return (
                        <Select.Option key={index} value={item.value} title={item.title}>
                          {item.title}
                        </Select.Option>
                      );
                    })
                }
              </Select>,
            )}
          </Form.Item>
          <Form.Item label='用户' {...FormItemLayout} className={'formCls1'} style={{ display: this.state.taskType == taskTypeObj.single ? 'inline-block' : 'none' }}>
            {getFieldDecorator('user', {
              rules: [{ required: true, message: '用户不能为空!' }],
            })(
              <Select
                getPopupContainer={(triggerNode) => triggerNode.parentNode}
                onChange={userChanged}
                disabled={mode === 'view'}
                showSearch
                optionFilterProp='children' //查询label
                filterOption={(
                  input,
                  option, //模糊搜索value 和 label
                ) => {
                  return option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0 || option.props.value.toLowerCase().indexOf(input.toLowerCase()) >= 0;
                }}
              >
                {userList &&
                  userList.map((item, index) => {
                    return (
                      <Select.Option key={index} value={item.value} title={item.title}>
                        {item.title}
                      </Select.Option>
                    );
                  })}
              </Select>,
            )}
          </Form.Item>
          {mode === 'view' ? null : (
            <Form.Item className={'saveClass'}>
              <PrimaryC title='保存设置' htmlType='submit' />
            </Form.Item>
          )}
        </Form>
      </div>
    );
  }
}
// props默认值
UserTaskPannel.propsTypes = {
  id: PropTypes.string, // 节点ID
  name: PropTypes.string, // 节点名称
  taskType: PropTypes.string, // 任务类型
  station: PropTypes.string, // 岗位
  user: PropTypes.string, // 用户
  nameChanged: PropTypes.func, // 名字变更事件
  taskTypeChanged: PropTypes.func, // 任务类型变更事件
  stationChanged: PropTypes.func, // 岗位变更事件
  userChanged: PropTypes.func, // 用户变更事件
  mode: PropTypes.string, // 模式（view-不可编辑，editor-可编辑）
  saveUserTask: PropTypes.func, // 保存设置事件
};

export default Form.create()(UserTaskPannel);
